{extend name='./layout/_content_open'}
{block name='content_open'}
<div class="panel panel-success">
    <div class="panel-body">
        <!-- 工具栏 -->
        <div id="tableToolbar">
            <div class="btn-group">
                {if in_array('/sys/menu/add',session('loginUserPermissions'))}
                <button type="button" class="btn btn-success" onclick="view.add();">
                    <i class="glyphicon glyphicon-plus"></i>添加
                </button>
                {/if}
                {if in_array('/sys/menu/edit',session('loginUserPermissions'))}
                <button type="button" class="btn btn-warning" onclick="view.edit();">
                    <i class="glyphicon glyphicon-edit"></i>编辑
                </button>
                {/if}
                {if in_array('/sys/menu/delete',session('loginUserPermissions'))}
                <button type="button" class="btn btn-danger" onclick="view.delete();">
                    <i class="glyphicon glyphicon-remove"></i>删除
                </button>
                {/if}
            </div>
            <input type="text" name="search" id="search" class="form-control pull-right" placeholder="回车搜索"
                   style="width: 150px;margin-bottom: 5px;">
        </div>
        <!-- 表格主体-->
        <div class="table-responsive">
            <table id="table">
            </table>
        </div>
        <!-- 表格数据处理（未完待续） -->
        <script type="text/javascript">
            $(function () {
                view.init();
            });
            var view = {
                layerIndex: 0,
                menuVue: null,
                table: null,//表格对象
                dataUrl: "{:url('/sys/menu/index')}",//数据加载地址
                addUrl: "{:url('/sys/menu/add')}",//数据添加地址
                editUrl: "{:url('/sys/menu/edit')}",//菜单编辑地址
                delUrl: "{:url('/sys/menu/delete')}",//删除数据地址
                selectedData: null,//选中的数据,
                id: 0,//操作数据的主键
                defaultColumns: function () {
                    var that = this;
                    //表头数据列
                    return [
                        {field: 'selectItem', checkbox: true},
                        {field: 'name', title: '名称'},
                        {
                            field: 'icon', title: '图标', formatter: function (arg) {
                                return "<i class='" + arg + "'></i>";
                            }
                        },
                        {
                            field: 'is_menu', title: '是否菜单', formatter: function (arg) {
                                if (arg === 0) {
                                    return '否';
                                } else if (arg === 1) {
                                    return '是';
                                } else {
                                    return '其他';
                                }
                            }
                        },
                        {field: 'module_name', title: '模块名称'},
                        {field: 'action_name', title: '控制器名称'},
                        {field: 'function_name', title: '方法名称'},
                        {
                            field: 'create_time', title: '创建时间', align: 'center', sortable: false
                        },
                        {
                            field: 'update_time', title: '修改时间', align: 'center'
                        },
                        {
                            field: 'delete_time', title: '是否已删除', align: 'center', formatter: function (arg) {
                                if (arg == null) {
                                    return '否';
                                }
                                return '是，删除时间：' + arg;
                            }
                        }, {field: 'sort', title: '排序', align: 'center'}
                    ];
                },
                init: function () {
                    var that = this;
                    that.table = $('#table').bootstrapTreeTable({
                        id: 'id',// 选取记录返回的值
                        code: 'id',// 用于设置父子关系
                        parentCode: 'parent_id',// 用于设置父子关系
                        rootCodeValue: "",//设置根节点code值----可指定根节点，默认为null,"",0,"0"
                        type: 'get',//请求数据的ajax类型
                        url: that.dataUrl,   //请求数据的ajax的url
                        ajaxParams: {}, //请求数据的ajax的data属性
                        expandColumn: 1,//在哪一列上面显示展开按钮,从0开始
                        striped: true,   //是否各行渐变色
                        expandAll: true,  //是否全部展开
                        columns: this.defaultColumns(),//列数组
                        toolbar: "#tableToolbar",//顶部工具条
                        responseHandler: function (argument) {
                            return argument;
                        },
                        clickToSelect: true,//点击行选中
                        expanderExpandedClass: 'glyphicon  glyphicon-triangle-bottom',
                        expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
                        saveState: true,
                        saveStateName:'tree-grid-state-menu',
                        classes: 'table table-striped table-hover table-no-left-right-border',
                    });
                    $('#search').on('change', this.search);
                },
                fun: function () {
                    //getSelections:获取选中行
                    var obj = this.table.bootstrapTreeTable('getSelections');
                    console.log(obj);
                },
                search: function () {
                    view.table.bootstrapTreeTable('refresh', {
                        search: $('#search').val()
                    });
                },
                add: function () {
                    // wpgaci.goUrl(this.addUrl);
                    var that = this;
                    this.layerIndex = layer.open({
                        type: 2,
                        title: '菜单添加',
                        shadeClose: true,
                        shade: 0.8,
                        maxmin: true,
                        area: ['90%', '90%'],
                        content: that.addUrl//iframe的url
                    });
                },
                edit: function () {
                    var obj = this.table.bootstrapTreeTable('getSelections');
                    if (obj.length < 1) {
                        layer.msg('请勾选要编辑的菜单', {icon: 5});
                        return false;
                    }
                    if (obj.length > 1) {
                        layer.msg('编辑菜单只可以勾选一条记录', {icon: 5});
                        return false;
                    }
                    //wpgaci.goUrl(view.editUrl + '?id=' + obj[0].id);
                    var that = this;
                    this.layerIndex = layer.open({
                        type: 2,
                        title: '菜单修改',
                        shadeClose: true,
                        shade: 0.8,
                        maxmin: true,
                        area: ['90%', '90%'],
                        content: that.editUrl + '?id=' + obj[0].id//iframe的url
                    });
                },
                delete: function () {
                    var obj = this.table.bootstrapTreeTable('getSelections');
                    if (obj.length < 1) {
                        layer.msg('请勾选要删除的菜单', {icon: 5});
                        return false;
                    }
                    var ids = "";
                    for (var i = 0; i < obj.length; i++) {
                        ids += obj[i].id + "-";
                    }
                    ids = ids.slice(0, ids.length - 1);
                    layer.confirm('要删除选中的数据？', {
                        btn: ['是', '否'] //按钮
                    }, function () {
                        $.get(view.delUrl + '?ids=' + ids, function (data) {
                            console.log(data);
                            if (data.status) {
                                view.table.bootstrapTreeTable('refresh', {
                                    search: $('#search').val()
                                });
                                layer.msg(data.msg, {icon: 1});
                            } else {
                                layer.msg(data.msg, {icon: 2});
                            }
                        });
                    });
                },
                close: function () {
                    if (this.layerIndex > 0) {
                        layer.close(this.layerIndex);
                    }
                }
            }
        </script>
    </div>
</div>
{/block}